<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>schedule</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />

	<link rel="stylesheet" href="https://at.alicdn.com/t/font_234130_nem7eskcrkpdgqfr.css">
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}
		#schedule-box{
			width: 320px;
			margin: 0 auto;
			padding: 35px 20px;
			font-size: 13px;
		}
		.schedule-hd{
			display: flex;
			justify-content: space-between;
			padding: 0 15px;
		}
		.today{
			flex: 1;
			text-align: center;
		}
		.ul-box{
			overflow: hidden;
		}
		.ul-box > li{
			float: left;
			width: 14.28%;
			text-align: center;
			padding: 5px 0;
		}
		.other-month{
			color: #999999;
		}
		.current-month{
			color: #333333;
		}
		.today-style{
			border-radius: 50%;
			background: #58d321;
		}
		.arrow{
			cursor: pointer;
		}
		.dayStyle{
			display: inline-block;
			width: 35px;
			height: 35px;
			border-radius: 50%;
			text-align: center;
			line-height: 35px;
			cursor: pointer;
		}
		.current-month > .dayStyle:hover{
			background: #00BDFF;
			color: #ffffff;
		}
		.today-flag{
			background: #00C2B1;
			color: #fff;
		}
		.boxshaw{
			box-shadow: 2px 2px 15px 2px #e3e3e3;
		}
		.selected-style {
			background: #00BDFF;
			color: #ffffff;
		}
		#h3Ele{
			text-align: center;
			padding-right: 5px;

		}
		.selectBtn{
			background: #00C2B1;
			border: 1px solid #00C2B1;
			color: white;
			padding: 8px 10px;
			border-radius: 5px;
			float: right;

		}
		.confirmText{
			height: 35px;
			line-height: 35px;
			padding: 23px;
			font-weight: 600;
		}
		.timeCont{
			color: gray;
			font-size: 12px;
		}
		.time{

		}
	</style>
</head>
<body>
	
	<div id='schedule-box' class="boxshaw">
		
	</div>
	<div>
		<h3 >


		</h3>
		<div class="confirmText">
			<span class="timeCont">具体时间:</span>
			<span class="time" id='h3Ele'>2017-11-14 </span>10:15-20:15
			<button class="selectBtn">我要选课</button>
		</div>


	</div>
</body>
<script src="schedule.js"></script>
<script>

	var mySchedule = new Schedule({
		el: '#schedule-box',

		clickCb: function (y,m,d) {
			document.querySelector('#h3Ele').innerHTML = ''+y+'-'+m+'-'+d
		},
		nextMonthCb: function (y,m,d) {
			//document.querySelector('#h3Ele').innerHTML = '日期：'+y+'-'+m+'-'+d
		},
		nextYeayCb: function (y,m,d) {
			//document.querySelector('#h3Ele').innerHTML = '日期：'+y+'-'+m+'-'+d
		},
		prevMonthCb: function (y,m,d) {
			//document.querySelector('#h3Ele').innerHTML = '日期：'+y+'-'+m+'-'+d
		},
		prevYearCb: function (y,m,d) {
			//document.querySelector('#h3Ele').innerHTML = '日期：'+y+'-'+m+'-'+d
		},

	});
</script>
</html>